<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    Hello world!
    <p>Hello world! 2</p>
    Hello world! 3
    <p>Hello world! 4</p>
    Hello world! 5
  </div>

  <script>
    const origin = document.querySelector('div')

    // 子节点
    const childNodes = origin.childNodes
    console.log(childNodes)

    // 第一个子节点
    const firstChild = origin.firstChild
    console.log(firstChild)

    // 最后一个子节点
    const lastChild = origin.lastChild
    console.log(lastChild)

    // 子元素节点
    const children = origin.children
    console.log(children)

    // 第一个子元素节点
    const firstElementChild = origin.firstElementChild
    console.log(firstElementChild)

    // 最后一个子元素节点
    const lastElementChild = origin.lastElementChild
    console.log(lastElementChild)
  </script>
</body>

</html>